<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/angular.js"></script>
    <script src="../lib/angular-route.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ngRoute'])
                .service('myService', ['$http', '$q', function ($http, $q) {
                    var baseUrl = 'https://itunes.apple.com/search?term=';
                    var _artist = '';
                    var _finalUrl = '';
                    var makeUrl = function () {
                        _artist = _artist.split('.').join('+');
                        _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK';
                        return _finalUrl;
                    };
                    this.setArtist = function (artist) {
                        _artist = artist;
                    };
                    this.getArtist = function () {
                        return _artist;
                    };
                    this.callItunes = function () {
                        makeUrl();
                        console.log(_finalUrl);
                        var deferred = $q.defer();
                        $http({
                            method: 'JSONP',
                            url: _finalUrl
                        }).success(function (data) {
                            return deferred.resolve(data);
                        }).error(function () {
                            deferred.reject('There was an error.');
                        });
                        return deferred.promise;
                    };
                }])
                .controller('myServiceCtrl', ['$scope', 'myService',
                    function ($scope, myService) {
                        $scope.data = {};
                        $scope.updateArtist = function () {
                            myService.setArtist($scope.data.artist);
                        };
                        $scope.submitArtist = function () {
                            $scope.updateArtist();
                            myService.callItunes().then(function (data) {
                                        $scope.data.artistData = data;
                                    },
                                    function (data) {
                                        console.log(data);
                                        alert(data);
                                    });
                        };
                    }]);
    </script>
</head>
<body ng-app="app">
<div ng-controller="myServiceCtrl">
    <div>
        <input type="text" ng-model="data.artist"/>
        <button type="button" ng-click="submitArtist()">refresh</button>
    </div>
    <ul>
        <li ng-repeat="artist in data.artistData.results">
            <img ng-src="{{artist.artworkUrl100}}"/>

            <div>
                <p>{{artist.artistName}}</p>

                <p>{{artist.collectionName}}</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>